@extends('layouts.appDomain')

@section('style')
    <style>
        .count{
            display: flex;color: white;font-weight: bold; font-size: 50px; border-radius: 10px; overflow: hidden
        }
        .count .item{
            /*flex: 1;*/
            padding: 0 20px;
            background-repeat: no-repeat;
            background-size: auto 100%;
        }
        .count .item.lm{
            background-color: #0042bb; text-align: end;
            background-image: url("/images/alliance.png");

        }
        .count .item.bl{
            background-color: #c10000;
            background-image: url("/images/horde.png");
            background-position: right;
        }
        @media screen and (max-width: 768px){
            .count{
                font-size: 50px;
            }
        }
    </style>


@endsection

@section('content')

<div class="container mt-5">

    <h1>排行榜</h1>

    <div class="count">
        <div class="item lm" style="flex: {{$count['LM']}}">
            {{$count['LM']}}
        </div>
        <div class="item bl" style="flex: {{$count['BL']}}">
            {{$count['BL']}}
        </div>
    </div>

    <table class="table mt-5">
        <thead>
        <tr>
            <th scope="col">名称</th>
            <th scope="col">等级</th>
            <th scope="col">种族</th>
            <th scope="col">职业</th>
{{--            <th scope="col">金币</th>--}}
            <th scope="col">是否在线</th>
        </tr>
        </thead>
        <tbody>
        @foreach($chars as $c)
            <tr>
                <td>{{$c->name}}</td>
                <td>{{$c->level}}</td>
                <td><component-character-race :race="{{$c->race}}"></component-character-race></td>
                <td><component-character-class :c="{{$c->class}}"></component-character-class></td>

                <td>
                    @if($c->online)
                        <span class="text-success h5"><i class="fas fa-check-circle"></i></span>
                    @else
                        <span class="text-muted"><i class="fas fa-times-circle"></i> {{$c->logout_time>0?date('Y-m-d H:i:s',$c->logout_time):''}}</span>
                    @endif
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
    <div class="mt-5">
        {{ $chars->links() }}
    </div>
</div>
@endsection
@section('script')
<script>
    var app = new Vue({
        el: '#app',
        data: {},
    });
</script>
@endsection
